<template>
  <div class="themes app-container">
    <nav-bar title="个性主题" left-arrow fixed placeholder />

    <div class="group">
      <div class="group-item"
           v-for="item in ThemesList"
           :key="item.theme"
           :class="item.theme === Themes ? 'active' : ''"
           @click="ChangeTheme(item.theme)"
      >
        <div class="content" :style="{background: item.bgColor,color: item.color}">
          <div class="desc">{{item.desc}}</div>
          <div class="theme">{{item.theme}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'themes',
  data () {
    return {
      ThemesList: [
        {theme: 'white', desc: '简洁白', bgColor: '#f5f5f5', color: '#000'},
        {theme: 'black', desc: '主题黑', bgColor: '#222', color: '#fff'}
      ]
    }
  },
  methods: {
    ChangeTheme (theme) {
      if (this.Themes === theme) return
      this.Themes = theme
    }
  },
  computed: {
    Themes: {
      get () {
        return this.$store.state.Themes
      },
      set (theme) {
        this.$store.dispatch('setTheme', theme)
        this.setStatusBarStyle(theme)
      }
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .themes {
    background: @color-background-d;
    transition: all .3s;
  }

  .nav-bar { transition: all .3s }
  .group {
    /*transition: background-color .3s;*/
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    .group-item {
      width: 50%;
      padding: 10px;
      box-sizing: border-box;
      .content {
        height: 73px;
        position: relative;
        border-radius: 4px;
        div { padding: 4px }
        .desc {
          padding: 12px 4px 4px;
          font-size: @font-size-large-x;
        }
        .theme { font-size: @font-size-medium-x }
      }
      .content:before {
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        background: inherit;
        filter: blur(5px);
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: -1;
        opacity: .4;
        transform-origin: 0 0;
        border-radius: inherit;
        transform: scale(1);
       }
    }
    .group-item.active {
      .content {
        border: 1.5px solid @color-theme;
        border-radius: 4px;
      }
    }
  }

</style>
